<template>
  <div>
    <div class="row">
      <div class="col-2">
        <div class="mt-5">
          <div class="list-group word-width" v-for="(item, index) in dataMsg.content">
            <button type="button" class="text-center list-group-item list-group-item-action" v-bind:class="index===idx?'active':''" @click="changeIndex(index)">
              {{item.type}}
            </button>
          </div>
        </div>
      </div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>{{dataMsg.title}}</p>
          <small class="text-muted font-italic">{{dataMsg.author}}</small>
        </h3>
        <div v-for="item in subDataMsg.content">
          <h4 class="text-center mb-3 font-weight-bold word-width">
            <p>{{item.chapter}}</p>
            <small class="text-muted font-italic">{{item.author}}</small>
          </h4>
          <ul class="list-unstyled text-small text-center word-width">
            <li v-for="itm in item.paragraphs">{{itm}}</li>
          </ul>
        </div>
      </div>
      <div class="col-3"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'TangShiSanBaiShou',
    data () {
      return {
        idx: -1,
        subDataMsg: [],
        dataMsg: {
          'title': '唐詩三百首',
          'content': [
            {
              'type': '五言絕句',
              'content': [
                {
                  'chapter': '行宮',
                  'subchapter': null,
                  'author': '唐代：元稹 ',
                  'paragraphs': [
                    '寥落古行宮，宮花寂寞紅。',
                    '白頭宮女在，閒坐說玄宗。'
                  ]
                },
                {
                  'chapter': '登鸛雀樓',
                  'subchapter': null,
                  'author': '唐代：王之渙 ',
                  'paragraphs': [
                    '白日依山盡，黃河入海流。',
                    '欲窮千里目，更上一層樓。'
                  ]
                }
              ]
            },
            {
              'type': '七言絕句',
              'content': [
                {
                  'chapter': '芙蓉樓送辛漸',
                  'subchapter': null,
                  'author': '唐代：王昌齡 ',
                  'paragraphs': [
                    '寒雨連江夜入吳，平明送客楚山孤。',
                    '洛陽親友如相問，一片冰心在玉壺。'
                  ]
                },
                {
                  'chapter': '閨怨',
                  'subchapter': null,
                  'author': '唐代：王昌齡 ',
                  'paragraphs': [
                    '閨中少婦不知愁，春日凝妝上翠樓。',
                    '忽見陌頭楊柳色，悔教夫婿覓封侯。'
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    computed: {
      dataMessage () {
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
        this.subDataMsg = this.dataMsg.content[0]
        this.idx = 0
      },
      idx () {
        this.subDataMsg = this.dataMsg.content[this.idx]
      }
    },
    mounted: function () {
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
      this.idx = 0
    },
    methods: {
      changeUrl () {
        let url = null
        if (window.location.href.includes('#/qianjiashi')) {
          url = '/mengxue/qianjiashi.json'
        } else if (window.location.href.includes('#/guwenguanzhi')) {
          url = '/mengxue/guwenguanzhi.json'
        } else if (window.location.href.includes('#/tangshisanbaishou')) {
          url = '/mengxue/tangshisanbaishou.json'
        } else {
          return
        }
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
      },
      changeIndex (idx) {
        this.idx = idx
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
